<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http//www.w3.org/1999/xhtml" dir="ltr">
<head profile="http//gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>AJAX File Upload - Web Developer Plus Demos</title>
<script type="text/javascript" src="js/jquery-1.3.2.js" ></script>
<script type="text/javascript" src="js/ajaxupload.3.5.js" ></script>
<link rel="stylesheet" type="text/css" href="./styles.css" />
<script type="text/javascript" >
    $(function(){
        var btnUpload=$('#upload');
        var btnsubmit=$('#xyz');
        var status=$('#status');
        new AjaxUpload(btnUpload, {
            action :'upload-file.php',
            name :'uploadfile',
            onSubmit: function(file, ext,filename){
                 if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ 
                    // extension is not allowed 
                    status.text('Only JPG, PNG or GIF files are allowed');
                    return false;
                }
                status.text('Uploading...');
            },
            onComplete:function(file, response){
                //On completion clear the status
                status.text('');
                //Add uploaded file to list
                if(response==="success"){
                    $('<li></li>').appendTo('#files').html('<img src="./uploads/'+file+'" alt="" /><br />'+file).addClass('success');
                } else{
                    $('<li></li>').appendTo('#files').text(file).addClass('error');
                }
            },
        },btnsubmit);
        
    });
</script>
</head>
<body>
<div id="mainbody" >
        <h3>&raquo; AJAX File Upload Form Using jQuery</h3>
        <!-- Upload Button, use any id you wish-->
        <button id="upload">Upload File</button><span id="status" ></span>        
        <ul id="files" ></ul>
         <button id="xyz">submit</button>
         <input type="hidden" value="abc.png" id="filename" />
</div>

</body>